---
import { BANNERS } from '@/consts/bannerData'
import SectionTitle from '@/components/SectionTitle.astro'
import { Image } from 'astro:assets'
---

<section id="banners" class="mx-auto my-16 max-w-2xl px-5 md:px-0 lg:my-20">
  <SectionTitle title="Promociones" />
  <div class="flex flex-col items-center gap-8">
    {
      BANNERS.map(({ id, url, image, name, label }) => (
        <a
          href={url}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={label ?? name}
          data-id={id}
          class="transition hover:scale-105"
        >
          <Image
            src={image.logo}
            width={image.width * 1.5}
            height={image.height * 1.5}
            alt={label ?? name}
            class="rounded-lg shadow-md hover:brightness-105"
          />
        </a>
      ))
    }
  </div>
</section>

<script>
  import { track } from '@vercel/analytics'
  import { $$ } from '@/lib/dom-selector'

  const banners = $$('#banners a')

  banners.forEach((banner) => {
    banner.addEventListener('click', () => {
      track('Product', {
        product: banner.getAttribute('data-id'),
      })
    })
  })
</script>
